More on
Quarto + Reveal.js

Another completely useless presentation

2024-03-28

Disclaimer

This is a companion testflight of the former. In this slide, I will test some advanced features of reveal.js for my personal use. The features come mostly from Quarto-Revealjs. This is source repo.

🐈🐈🐈

  • 이 PT는 이 프로젝트의 좀 고급진 장난질입니다. 내용은 무시하고 기능만 봐주세요.
  • Quarto+reveal.js에서 개인적으로 필요한 요소들을 구현했습니다.

1 Checkpoint

1.1 이전 버전과 달라진 것 1

  • theme를 세가지 구조로 재조직
    • format.scss: 전체적인 포맷
    • customs.scss: 커스터마이즈
    • theme-dark.scss, theme-light.scss: 테마 컬러 선택

1.2 이전 버전과 달라진 것 2

  • customs.scss 특화

2 확장 다루기(_Extensions)

2.1 Slide Header

  • 슬라이드 헤더는 어떻게 붙이는가?
  • 좋은 애드온이 있다. 애드온에 대한 설명은 아래 참고
  • reveal-header
  • 커스터마이즈를 위해서는 css를 수정하면 된다.
    • 아래는 --my-brightness를 조절해 섹션 헤더의 밝기를 조절하는 코드다.
.reveal-header .sc-title p,
.reveal-header .sb-title p {
  font-size: max(15px, 1.45vw);
  /* font-size: max(10px, 1.45vw); */
  filter: brightness(var(--my-brightness));
}
  • 마지막 페이지에서 헤더가 이상하게 뜨는 버그가 있다.
    • 아직 해결책을 찾지 못했다…
    • 의도는 --my-brightness를 조절해 헤더를 표시되지 않게 하는 것

3 Quarto with CSS!

3.1 CSS what, where

  • scsscss든 불러올 수 있다.
  • 가장 문제가 되는 것은 위치
    • 만일 본문에 관련된 것이라면 css: [...]로 preamble에 넣으면 된다.
    • 헤더나 푸터와 관련된 것이라면 theme: [...]에 함께 넣어야 한다.
  • 현재 이 슬라이드에는 customs.scss(LINK)가 적용되어 있다.
    • .reveal .reveal-header .sc-title 설정
    • .reveal .footer 설정
    • 제목에서 본문까지 거리 조절
    • 캡션 텍스트 가운데 정렬

3.2 CSS working?

  • customs.scss에 있는 내용이 잘 작동하는가?
    • css에서 그림의 캡션이 가운데로 오도록 정렬했다.
탑건 냥이

자는 냥이

4 기타 기믹들

4.1 배경색 조정하기

  • theme-dark.scss를 테마에 포함한다.
  • 올 블랙이 부담스러워서 조금 톤다운을 했다.
$body-bg: #303030;

4.2 Numbering section

  • yml에서 설정해주면 된다.
number-sections: true
  • # 제목 뒤에 {} 안에 설정하면 개별 슬라이드에서 통제 가능하다.
    • .unlisted: toc에서 뺀다.
    • .unnumbered: 번호를 뺀다.

4.4 단어 색깔 바꾸기

  • 단어 하나의 색깔만 바꿔보자.
  • 다른 형식은 바뀌지 않아야 한다.
  • How does it look like in English?

4.6 종으로 긴 그림

  • 그런데 로고를 어떻게 없앴나?
  • 여기를 참고하라.
    • customs.css에 slide-logo 관련 추가
    • 없애고 싶은 페이지에서
    • background-color="#303030"

4.7 객체 위치 설정 1

 

 

  • 텍스트는 여기 있습니다.
  • 좀 더 올려붙일 수 없나요?

4.8 객체 위치 설정 2

 

 

  • 텍스트를 이렇게 올려 붙였습니다!
  • css 스타일을 지정해 해결할 수 있다.
:::{style="position:relative; top:-50px;"} 
TO BE UPPLIFTED TEXT
:::

4.9 객체 위치 선정 3

  • 이 녀석은 아기고양이인가?
  • 이 녀석은 귀여운 고양이인가?
  • 요 놈은 고양이인가?
  • 이 예에서 볼 수 있듯이, {layout...} 안애 css는 먹지 않는다.
  • layout과 같은 수준에서 css를 먹이면 이 예시처럼 잘 먹는다.

5 Unsolved

5.1 css 적용이 안되는 부분

.reveal .slide-number > a[href*='title-slide'] {
  display: none;
}
  • css에서 페이지([...])를 지정해서 slide-number를 지울 수 있다.
  • 같은 방식이 footer에는 적용되지 않더라…

End of Document

Q & A